<template>
  <div class="right-attribute">
    <div class="base-json-box" v-for="(item, index) in attModule" :key="index">
      <div class="module-head">
        <div>{{ item.name }}</div>
        <el-button @click="clickAttributeLayer(index)">
          <el-icon>
            <FolderChecked />
          </el-icon>
          <span>保存</span>
        </el-button>
      </div>
      <div class="module-box">
        <div class="attribute-btn" v-if="item.name === '基本操作'">
          <BaseOperation ref="BaseOperationRef"></BaseOperation>
        </div>
        <div class="attribute-base" v-else-if="item.name === '基础属性'">
          <BaseAttribute ref="BaseAttributeRef"></BaseAttribute>
        </div>
        <div class="attribute-business" v-else-if="item.name === '业务属性'"></div>
        <div class="attribute-data-source" v-else-if="item.name === '数据源关联'"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import BaseOperation from '@/views/showroom3D/components/BaseOperation.vue';
import BaseAttribute from '@/views/showroom3D/components/BaseAttribute.vue';
const props = defineProps({
  selectModel: {
    type: Object,
    default: () => ({})
  }
})
const BaseAttributeRef = ref(null)
const BaseOperationRef = ref(null)

const clickAttributeLayer = (index) => {
  if (index === 0) {
    BaseOperationRef.value[0].saveOperation()
  }
  else if (index === 1) {
    BaseAttributeRef.value[0].saveAttribute()
  }
}

// 计算属性
const computedBtns = computed(() => {
  return {}
})

// 计算属性
const computedAttr = computed(() => {
  return {}
})

const attModule = ref([
  {
    id: '0', name: '基本操作',
    obj: computedBtns
  },
  {
    id: '1', name: '基础属性',
    obj: computedAttr
  },
  {
    id: '2', name: '业务属性',
    obj: {
      基本设置: {
        亮灯模式: ['常亮', '常灭', '感应'],
        有人亮度: 0,
        无人亮度: 0,
        色温: '',
        感应模式: ['一段', '二段'],
        一段延时: 0,
        二段延时: 0,
        恒照度模式: ['无效', '自控', '被控'],
        应用到场景: ['场景1', '场景2', '场景3', '场景4', '场景5', '场景6']
      },
      传感器设置: {},
      调光设置: {},
      遥控器设置: {},
      恒照度: {},
      网络设置: {}
    }
  },
  {
    id: '3', name: '事件绑定', obj: {
      定时任务: '',
      操作名称: ['常亮', '常灭'],
      操作参数: '',
      操作类型: '',
      操作地址: ''
    }
  },
  {
    id: '4', name: '数据源绑定', obj: {
      所属网关: '',
      所属分区: '',
      所属分组: ''
    }
  }
])

const basicOperation = ref(['常亮', '常灭', '感应'])

const emit = defineEmits(['update:attObj'])

const setInitAttribute = () => {

}
onBeforeMount(() => {
  console.log('onBeforeMount(RightAttribute)->')
})
onMounted(() => {
  console.log('onMounted(RightAttribute)->')
})
</script>
<style scoped lang="scss">
.right-attribute {
  width: 100%;
  height: 100%;

  .base-json-box {
    margin-bottom: 0.5rem;
    border: 1px solid #317aee;
  }

  .attribute-btn {
    // padding: 1rem 0.5rem;
    background-color: #2b2b2b;
    border-top: 1px solid #317aee;
  }

  .module-head {
    height: 3rem;
    line-height: 3rem;
    font-size: 1.3rem;
    color: #fff;
    padding-left: 1.5rem;
    background-color: #212121;
    display: flex;
    justify-content: space-between;

    .el-button {
      background-color: #217093;
      border: none;
      color: #fff;
      width: 6rem;
      font-size: 2rem;
      border-radius: 0.2rem;
      margin: 0.4rem 0.3rem;
    }

    .el-button:hover {
      background-color: #79bbff;
    }

    .el-button:active {
      background-color: #217093;
    }

    span {
      font-size: 1.3rem;
    }
  }

  .a-i-label {
    width: 10rem;
    text-align: left;
    margin-left: 1.5rem;
    user-select: none;
  }

  .a-i-value {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>